<i class="black close icon"></i>
<div class="header">
  {{t 'Update image'}}
</div>
<div class="content">
  <div class="ui grid">
    <div class="row">
      <div class="sixteen wide column">
        <Widgets::Forms::ImageUpload
          @imageUrl={{this.placeholder.originalImageUrl}}
          @selectedImage={{this.placeholder.originalImageUrl}}
          @needsCropper={{true}}
          @label={{t "Update Image"}}
          @id="user_image"
          @aspectRatio={{if (eq this.placeholder.name "avatar") (array 1 1) (array 2 1)}}
          @icon="photo"
          @hint={{t "Select Image"}}
          @maxSizeInKb={{this.settings.imageSize}}
          @helpText={{t "For Cover Photos : 300x150px (2:1 ratio) image.
                    For Avatar Photos : 150x150px (1:1 ratio) image."}} />
        <form class="ui form">
          <div class="field">
            <label class="ui label">{{t 'Copyright information'}}</label>
            <div class="ui input">
              <Input
                @type="text"
                @value={{this.placeholder.copyright}} />
            </div>
          </div>
          <div class="field">
            <label class="ui label">{{t 'Origin information'}}</label>
            <div class="ui input">
              <Input
                @type="text"
                @value={{this.placeholder.origin}} />
            </div>
          </div>
        </form>

      </div>
    </div>
    <div class="row">
      <div class="sixteen wide column right floated right aligned">
        <button class="ui primary button" {{action 'updatePlaceholder'}}>{{t 'Update'}}</button>
        <button class="ui button" {{action (mut this.isOpen)}}>{{t 'Cancel'}}</button>
      </div>
    </div>
  </div>
</div>
